{extend name="common/application" /}
{block name="title"}<title id="title">店铺中心-我的消息</title>{/block}
{block name="css"}
<link rel="stylesheet" type="text/css" href="_CSS_/reset.css">
<link rel="stylesheet" type="text/css" href="_CSS_/common.css">
<link rel="stylesheet" type="text/css" href="_CSS_/help.css"/>
<link rel="stylesheet" type="text/css" href="_CSS_/store_center.css"/>
<!--[if lt IE 9]>
<script src="http://www.ijquery.cn/js/html5shiv.js"></script>
<![endif]-->
<style>
.message-box .message-title .message-t2{width:160px;}
.message-box .message-title .message-t3 {width: 200px;}
.message-box .message-title .message-t4{width:200px;}
.message-box .message-list .list-l1 {
    width: 330px;
	margin-right:40px;
}
.message-box .message-list .list-l3{margin-left:35px;}
.nodatas{text-align:center;padding:100px 0;width:850px;}
.nodatas img{margin:100px 0 50px 0;}
</style>
{/block}


{block name="content"}
<!-- 主体内容 -->
<div class="main">
    <div class="mainBody normalBox clearfix">
        <!--左菜单-->
        {include file="/common/left" /}
        <!--右内容-->
        <div class="menuContent fr">
            <div class="menuConHeader">
                <!--面包屑导航-->
                <div class="breadcrumb">
                    <p>
                        <a href="javascript:;">消息中心</a> &gt;
                        <a class="curPage" href="{:url('index/store/message')}">我的消息</a>
                    </p>
                </div>
            </div>
            <input type="hidden" id="index">
            <div class="menuConBody">
                <div class="courseMenu">
                    <div class="courseSelect bor-btno">
                        <ul>
                            <li class="selected">
                                <a class="selectType" href="javascript:;">买家消息</a>
                            </li>
                            <li>
                                <!--<a class="selectType" href="javascript:;">平台消息</a>-->
                            </li>
                        </ul>
                    </div>
                    <div class="conBody">
                        <div class="nodatas" style="display: none;"><img src="/static/web/images/nocart.png"><p>暂无相关数据</p>
                        </div>
                        <div class="message-box">
                            <div class="message-title">
                                <div class="message-t message-t1"><input type="checkbox" name=""></div>
                                <div class="message-t message-t2"><a class="sign-btn" href="javascript:;">标记为已读</a>
                                </div>
                                <div class="message-t message-t3"><p>消息</p></div>
                                <div class="message-t message-t4"><p>发件人</p></div>
                                <div class="message-t message-t5"><p>时间</p></div>
                                <div class="message-t message-t6"><p>操作</p></div>
                            </div>
                            <div class="message-list">
                                <ul id="king">
                                    <!-- 系统消息和买家消息不同 -->
                                    <!--<li>-->
                                    <!--<div class="list-l list-l1">-->
                                    <!--<label><input type="checkbox" name="">什么什么什么什么吗神神秘秘</label>-->
                                    <!--</div>-->
                                    <!--<div class="list-l list-l2"><p>王小二</p></div>-->
                                    <!--<div class="list-l list-l3"><p>2018.03.15</p></div>-->
                                    <!--<div class="list-l list-l4"><a class="cl-b" href="javascript:;"-->
                                    <!--onclick="check_mes()">查看</a></div>-->
                                    <!--</li>-->
                                    <!--<li>-->
                                    <!--<div class="list-l list-l1">-->
                                    <!--<label><input type="checkbox" name="">什么什么什么什么吗神神秘秘</label>-->
                                    <!--</div>-->
                                    <!--<div class="list-l list-l2"><p>王小二</p></div>-->
                                    <!--<div class="list-l list-l3"><p>2018.03.15</p></div>-->
                                    <!--<div class="list-l list-l4"><a class="cl-b" href="javascript:;"-->
                                    <!--onclick="check_mes2()">查看</a></div>-->
                                    <!--</li>-->
                                    <!--<li>-->
                                    <!--<div class="list-l list-l1">-->
                                    <!--<label><input type="checkbox" name="">什么什么什么什么吗神神秘秘</label>-->
                                    <!--</div>-->
                                    <!--<div class="list-l list-l2"><p>王小二</p></div>-->
                                    <!--<div class="list-l list-l3"><p>2018.03.15</p></div>-->
                                    <!--<div class="list-l list-l4"><a class="cl-b" href="javascript:;"-->
                                    <!--onclick="check_mes()">查看</a></div>-->
                                    <!--</li>-->
                                    <!--<li>-->
                                    <!--<div class="list-l list-l1 list-lr">-->
                                    <!--<label><input type="checkbox" name="">什么什么什么什么吗神神秘秘</label>-->
                                    <!--</div>-->
                                    <!--<div class="list-l list-l2"><p>王小二</p></div>-->
                                    <!--<div class="list-l list-l3"><p>2018.03.15</p></div>-->
                                    <!--<div class="list-l list-l4"><a class="cl-b" href="javascript:;"-->
                                    <!--onclick="check_mes2()">查看</a></div>-->
                                    <!--</li>-->
                                    <!--<li>-->
                                    <!--<div class="list-l list-l1 list-lr">-->
                                    <!--<label><input type="checkbox" name="">什么什么什么什么吗神神秘秘</label>-->
                                    <!--</div>-->
                                    <!--<div class="list-l list-l2"><p>王小二</p></div>-->
                                    <!--<div class="list-l list-l3"><p>2018.03.15</p></div>-->
                                    <!--<div class="list-l list-l4"><a class="cl-b" href="javascript:;"-->
                                    <!--onclick="check_mes()">查看</a></div>-->
                                    <!--</li>-->
                                    <!--<li>-->
                                    <!--<div class="list-l list-l1 list-lr">-->
                                    <!--<label><input type="checkbox" name="">什么什么什么什么吗神神秘秘</label>-->
                                    <!--</div>-->
                                    <!--<div class="list-l list-l2"><p>王小二</p></div>-->
                                    <!--<div class="list-l list-l3"><p>2018.03.15</p></div>-->
                                    <!--<div class="list-l list-l4"><a class="cl-b" href="javascript:;"-->
                                    <!--onclick="check_mes2()">查看</a></div>-->
                                    <!--</li>-->
                                </ul>
                            </div>
                            <div class="message-title message-foot">
                                <div class="message-t message-t1"><label><input type="checkbox" name="">全选</label></div>
                                <div class="message-t message-ba"><p><a class="del-btn" href="javascript:;">删除</a></p>
                                </div>
                            </div>
                        </div>


                    </div>
                    <div id="page"></div>
                </div>
            </div>

        </div>
    </div>
</div>
{/block}
{block name="js"}
<!-- 脚本引入 -->
<script src="_P_/layer/layer.js"></script>
<script src="_JS_/time.js"></script>
<script>

    // $(document).ready(function () {
    //
    //     /*消息切换*/
    //     $(".courseSelect li").on("click", function () {
    //         var num = $(".courseSelect li").index(this);
    //         $("#index").val(num);
    //         $(".courseSelect li").removeClass("selected");
    //         $(this).addClass("selected");
    //     });
    // });

    $(function () {
        postfile(1);
    })
    $(document).ready(function () {
        $('.li4').addClass('showChild');
        $('.li41').addClass('activeMenu');
    });
    function postfile(page) {
        var userinfo = $.cookie('userinfo');
        if (userinfo != null) {
            var user_login = $.base64.decode(userinfo).split(",");
            $.ajax({
                type: "get",
                url: "{:url('api/shop/message')}",
                data: {'uid': user_login[0], 'page': page},
                dataType: 'jsonp',
                success: function (msg) {
                    if (msg.code == 200) {
                        if (msg.data.data.length != 0) {
                            $("#king").html("");
                            for (var i = 0; i < msg.data.data.length; i++) {
                                var html = '';
                                if (msg.data.data[i].status == 1) {
                                    html += '<li id="' + msg.data.data[i].id + '"><div class="list-l list-l1 list-lr">' +
                                        '<label><input type="checkbox" name="allcheck">' + msg.data.data[i].content + '</label>' +
                                        '</div><div class="list-l list-l2 list-lr"><p>' + msg.data.data[i].username + '</p></div>' +
                                        '<div class="list-l list-l3"><p>' + getMyDate(msg.data.data[i].time * 1000) + '</p></div>' +
                                        '<div class="list-l list-l4">' +
                                        '<a class="cl-b" href="javascript:;" onclick="check_mes(' + msg.data.data[i].id + ')">查看</a></div>' +
                                        '</li>';
                                } else {
                                    html += '<li id="' + msg.data.data[i].id + '"><div class="list-l list-l1">' +
                                        '<label><input type="checkbox" name="allcheck">' + msg.data.data[i].content + '</label>' +
                                        '</div><div class="list-l list-l2 list-lr"><p>' + msg.data.data[i].username + '</p></div>' +
                                        '<div class="list-l list-l3"><p>' + getMyDate(msg.data.data[i].time * 1000) + '</p></div>' +
                                        '<div class="list-l list-l4">' +
                                        '<a class="cl-b" href="javascript:;" onclick="check_mes(' + msg.data.data[i].id + ')">查看</a></div>' +
                                        '</li>';
                                }
                                $("#king").append(html);
                            }
                            if (msg.data.data.length == 0) {
                                $('#page').html('');
                            } else {
                                $('#page').html(msg.data.render);
                                $("#pagination").delegate("a", "click", function () {
                                    var num = $(this).attr("num");
                                    if (num) {
                                        postfile(num);
                                    }
                                });
								var pages = Math.ceil(msg.data.count / 10);
								$("#GO").on('click',function(){
									var king = $("#go").val();
									if(king > pages){
										layer.alert("最多输入"+pages+"页");
										return;
									}
									postfile(king);
								});
                            }
                        }else{
							$('.message-title').css('display','none');
							$("#king").html("<div class='nodatas'><img src='/static/web/images/nodatas01.png'/><p>抱歉，找不到相关数据</p></div>");
						}
                    }
                }
            })
        } else {
            window.location.href = "{:url('index/login/index')}";
        }
    }

    // 更改已读
    $(".sign-btn").on('click', function () {
        var arrs = new Array();
        $("#king input[name='allcheck']:checked").each(function () {
            arrs.push($(this).parents('li').attr('id'));
        });
        var uids = arrs.join(",");
        $.ajax({
            type: "get",
            url: "{:url('api/shop/del_all')}",
            data: {'uid': uids, 'status': 1},
            dataType: 'jsonp',
			beforeSend: function () {
                var index = layer.load(1, {
                    shade: [0.1, '#333333'] //0.1透明度的白色背景
                });
			},
            success: function (msg) {
                layer.closeAll();
                postfile(1);
            }
        })
    })

    // 删除
    $(".del-btn").on('click', function () {
        var arrs = new Array();
        $("#king input[name='allcheck']:checked").each(function () {
            arrs.push($(this).parents('li').attr('id'));
        });
        var uids = arrs.join(",");
        $.ajax({
            type: "get",
            url: "{:url('api/shop/del_all')}",
            data: {'uid': uids, 'status': 3},
            dataType: 'jsonp',
			beforeSend: function () {
                var index = layer.load(1, {
                    shade: [0.1, '#333333'] //0.1透明度的白色背景
                });
			},
            success: function (msg) {
                layer.closeAll();
                postfile(1);
            }
        })
    })

    /*买家消息查看*/
    function check_mes(id) {
        layer.open({
            type: 2,
            title: '查看',
            skin: 'layui-layer-lan',
            area: ['560px', '400px'], //宽高
            content: 'check_mes.html#' + id
        });
    }

    /*系统消息查看*/
    // function check_mes2() {
    //     layer.open({
    //         type: 2,
    //         title: '查看',
    //         skin: 'layui-layer-lan',
    //         area: ['560px', '350px'], //宽高
    //         content: 'check_mes2.html'
    //     });
    // }

    //实现全选反选
    $(".message-title input:checkbox").on('click', function () {
        $(".message-title input:checkbox").prop("checked", $(this).prop('checked'));
        $(".message-list input:checkbox").prop("checked", $(this).prop('checked'));
    })
    $(".message-list input:checkbox").on('click', function () {
        //当选中的长度等于checkbox的长度的时候,就让控制全选反选的checkbox设置为选中,否则就为未选中
        if ($(".message-list input:checkbox").length === $(".message-list input:checked").length) {
            $(".message-title input:checkbox").prop("checked", true);
        } else {
            $(".message-title input:checkbox").prop("checked", false);
        }
    });
    //标记已读
    $('.sign-btn').on("click", function () {
        $(".message-list input:checked").parents('.list-l').addClass('list-lr');
    })
    //删除
    $('.del-btn').on("click", function () {
        $(".message-list input:checked").parents('li').remove();
    })


</script>
{/block}